<template>
  <div class="bg-white flex flex-col mt-4">
    <div class="w-[350px] m-auto flex flex-col md:w-[1040px] md:m-auto">
      <div class="relative my-8 md:my-16">
        <!-- 灰色细长背景 -->
        <div class="absolute right-0 top-1/2 transform -translate-y-1/2 bg-bgColorGrey h-[280px] w-[85%] rounded-r-[19px] z-0"></div>
        
        <!-- 内容区域 -->
        <div class="flex flex-col md:flex-row relative z-10">
          <div class="md:w-1/2 flex items-center">
            <img :src="currentCase.coverImage" class="w-[500px] h-[360px] object-cover rounded-[60px] shadow-lg border-[3px] border-primary border-solid" />
          </div>
          <div class="md:w-1/2 px-2 md:py-12 flex flex-col justify-center">
            <div class="h-[200px] text-[34px] font-bold">{{ currentCase.title }}</div>
            <div>
              <span class="text-[20px] text-primary font-bold pr-2">{{ getMonthName(currentCase.createAt) }}</span>
              <span class="text-[20px] font-bold">{{ getDayAndYear(currentCase.createAt) }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="text-[22px] leading-[25px]">
        {{ currentCase.summary }}
      </div>
      <div class="border-b-[2px] border-lineColorGrey py-[8px]"></div>
      <div class="py-[32px]" v-html="currentCase.content"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { contentDetailApi } from '@/api/content'
import { onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
import { getMonthName, getDayAndYear } from '@/utils/tool'

const route = useRoute()

const currentCase = ref({} as any)

const cid = route.query.cid as string

const getCaseDetail = async () => {
  const res: any = await contentDetailApi(cid, 'view')
  if (res.code === 0 && res.data) {
    currentCase.value = res.data
  }
}

onMounted(() => {
  getCaseDetail()
})
</script>

<style scoped>
</style>
